<template>
    <div>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                      v-loading="pageLoading" row-key="id" style="width: 100%; margin-bottom: 20px" indent="0">
                <el-table-column prop="id" label="编号" min-width="35" align="center"></el-table-column>
                <el-table-column prop="resourceName" label="资源名称" min-width="120" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="resourceUrl" label="资源路径" min-width="120" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="seq" label="序号" ></el-table-column>
                <el-table-column prop="createTime" label="添加时间" :show-overflow-tooltip="true"
                                 min-width="120"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts" name="basetable">
    import {ref, reactive, nextTick} from 'vue';
    import {ElMessage, ElMessageBox} from 'element-plus';
    import {Delete, Edit, Search, Plus, Document} from '@element-plus/icons-vue';
	import {
		addAddressBookApi, addServiceTypeApi,
		fetchData, getAddressBookListApi,
		getCompanyOptions,
		getHouseKeeperApi,
		getHouseKeeperListApi, getResourceListApi, getServiceTypeListApi,
		getTypeOptions, updateAddressBookApi,
		updateHouseKeeperApi, updateServiceTypeApi
	} from '../api/index';
    import address from "../assets/json/address.json";

    const query = reactive({
        phone: '',
        name: '',
        pageNum: 1,
        pageSize: 10
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
    const pageLoading = ref(false);
    // 获取表格数据
    const getData = async () => {
        pageLoading.value = true;
        const res = await getResourceListApi();
        if (res) {
            tableData.value = res.data;
        }
        pageLoading.value = false;
    };
    getData();

    // 查询操作
    const handleSearch = () => {
        query.pageNum = 1;
        getData();
    };
    // 分页导航
    const handlePageChange = (val: number) => {
        query.pageNum = val;
        getData();
    };

    // 表单信息
    let form = reactive({
        id: null,
        name: '',
        state: '',
        seq: ''
    });
    const dialogVisible = ref(false);
    const addressRef = ref();
    // 新增
    const handleAdd = async () => {
        Object.keys(form).forEach((key: any) => form[key] = '');
        dialogVisible.value = true;
        await nextTick(() => {
            addressRef.value.clearSelected();
        });
    };
    // 修改
    const handleEdit = async (index: number, row: any) => {
        Object.keys(form).map((name: any) => form[name] = row[name]);
        dialogVisible.value = true;
        await nextTick(() => {
            addressRef.value.initShow(form.province, form.city, form.town);
        });
    };
    // 保存新增或修改信息
    const save = async () => {
        if (form.id) {
            const res = await updateServiceTypeApi(form);
            if (res) {
                await getData();
                dialogVisible.value = false;
                ElMessage.success(`修改成功`);
            }
        } else {
            const res = await addServiceTypeApi(form);
            if (res) {
                await getData();
                dialogVisible.value = false;
                ElMessage.success(`添加成功`);
            }
        }
    };

    // 省市区组件发生修改时同步表单信息
    const selectedAddress = (address: any) => {
        console.log("selectedAddress", address);
        form.province = address.province;
        form.city = address.city;
        form.town = address.town;
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 180px;
    }

    .handle-input {
        width: 180px;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #F56C6C;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
